Skip to main content

Style Property

Style Property allows users to define and apply custom styling attributes to elements, enhancing their appearance and alignment with specific design requirements.

🧩 Overview​

The Style Property feature enables fine-grained control over the visual presentation of UI components by letting users customize CSS-like properties such as:

  • Colors (background, text, borders)
  • Spacing (margin, padding)
  • Typography (font size, weight, style)
  • Layout attributes (width, height, display, alignment)
  • Borders and shadows
  • Responsive behavior (media queries, adaptive sizing)

This customization helps ensure that components fit seamlessly into a design system or meet unique branding guidelines.

⚙️ Key Features​

  • Select any component from the available list to apply styles
  • Define styles using a form or direct property input
  • Preview style changes in real-time before applying
  • Save and reuse style profiles across components or projects
  • Override default component styles without modifying base code

🖥️ Use Cases​

ScenarioDescription
BrandingCustomize colors and fonts to match brand identity
Responsive DesignAdjust spacing and size for different screen resolutions
ThemingSwitch between light/dark modes by toggling style sets
AccessibilityIncrease font sizes or contrast for better readability
Custom AnimationsAdd shadows, transitions, or hover effects

🔄 Pageflows Example​

  1. Open the Style Property modal.
  2. Select the component you want to style from the dropdown.
  3. Input desired style values (e.g., background-color: #f0f0f0; padding: 10px;).
  4. Preview the component with new styles applied.
  5. Confirm and save to apply changes throughout the system or page.

🎨 Modal Style (Related Feature)​

The Modal Style allows customizing the overall layout and design of modal dialogs, including:

  • Borders and border-radius
  • Padding and margin
  • Background overlays
  • Animation duration and easing
  • Typography inside modals

This ensures modals are visually consistent and provide a smooth user experience.

🧠 Best Practices​

  • Use consistent units (e.g., rem, em, %) for responsive scaling
  • Keep styles modular and reusable
  • Avoid inline styles that cannot be overridden globally
  • Test styles on multiple devices and browsers
  • Document style conventions for team alignment

🔚 Summary​

Style Property is a powerful tool to tailor the look and feel of UI components without code changes, enabling designers and developers to maintain visual consistency and meet user experience goals efficiently.